<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>utils/layer.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-draw.html">$ui/map/my-map-draw</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~finish">finish</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~getFeatures">getFeatures</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~removeFeature">removeFeature</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-measure.html">$ui/map/my-map-measure</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-measure.html#~clear">clear</a></li></ul></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scale.html">$ui/map/my-map-scale</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-track.html">$ui/map/my-map-track</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="module-$ui_map_my-map-cluster.html#~event:change">change</a></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-$ui_map_my-map-measure.html#~event:end">end</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#createWMTSLayer">createWMTSLayer</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">utils/layer.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import TileLayer from 'ol/layer/Tile'
import LayerGroup from 'ol/layer/Group'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import WMTS from 'ol/source/WMTS'
import TileImage from 'ol/source/TileImage'
import TileGrid from 'ol/tilegrid/TileGrid'
import WMTSGrid from 'ol/tilegrid/WMTS'

import TileSuperMapRest from '../plugins/TileSuperMapRest'

import {getWidth, getTopLeft} from 'ol/extent'
import {get as getProj} from 'ol/proj'

import {parse, stringify} from '$ui/utils/url'

import baiduLayer from './baiduLayer'

const AMAP_URL = 'http://webrd03.is.autonavi.com/appmaptile?style=8&amp;x={x}&amp;y={y}&amp;z={z}&amp;lang=zh_cn'
const BAIDU_URL = 'http://online{n}.map.bdimg.com/tile/?qt=vtile&amp;x={x}&amp;y={y}&amp;z={z}&amp;styles=pl&amp;scaler=1&amp;udt=20190718'
const EZ_URL = 'http://10.8.6.103/PGIS_S_TileMapServer/Maps/BJSL/EzMap?Service=getImage&amp;Type=RGB&amp;ZoomOffset=0'
const SUPER_URL = 'http://53.1.238.17/iserver/services/map-pgisvec/rest/maps/pgisvecv1'
const FC_URL = 'http://68.26.21.71/images/GetImage.do?method=showImageRedisBytable&amp;jinyi_admin:MA_PGISSLDT&amp;version=v1'


function getFcOrigins() {
  const origins = []
  for (let i = 0; i &lt; 20; i++) {
    const item = i &lt; 7 ? [64, 64] : [107.5, 28]
    origins.push(item)
  }
  return origins
}

function getFcResolutions() {
  const result = []
  const first = 2.0000081722216954
  for (let i = 0; i &lt; 20; i++) {
    const item = first / Math.pow(2, i)
    result.push(item)
  }
  return result
}


export function getWMTSGrid(proj = 'EPSG:4326') {
  const tileSizePixels = 256
  const projection = getProj(proj)
  const projectionExtent = projection.getExtent();
  const size = getWidth(projectionExtent) / tileSizePixels
  const matrixIds = [];
  const resolutions = [];
  for (let i = 0; i &lt;= 20; i++) {
    matrixIds[i] = i;
    resolutions[i] = size / Math.pow(2, i);
  }
  return new WMTSGrid({
    origin: getTopLeft(projectionExtent),
    resolutions: resolutions,
    matrixIds: matrixIds
  });
}


/**
 * 天地图
 * @param {string} t
 *
 * vec_w: 矢量底图
 * cva_w: 矢量注记
 * img_w: 卫星影像底图
 * cia_w: 影像注记
 * ter_w: 地形底图
 * cta_w: 地形注记
 * ibo_w: 境界（省级以上）
 */
function createTdtLayer(t = 'vec_c') {
  return new TileLayer({
    source: new XYZ({
      url: 'http://t{0-7}.tianditu.com/DataServer?T=' + t + '&amp;x={x}&amp;y={y}&amp;l={z}&amp;tk=464554f64aa4f4e90e0321c17a57a331'
    })
  })
}

/**
 * 适配天地图图层
 * @param settings
 * @return {LayerGroup}
 */
function createTdtLayerGroup(settings) {
  const layers = settings.layers.map(n => createTdtLayer(n))
  return new LayerGroup({
    layers: layers
  })
}

/**
 * 适配创建方正地图图层
 * @param settings
 * @return {*}
 */
function createFounderLayer(settings) {
  const tileGrid = getWMTSGrid()
  const basePath = settings.url
  return new TileLayer({
    source: new WMTS({
      url: basePath,
      tileGrid: tileGrid
    }),
    wrapX: false
  })
}

/**
 * 山海经纬 PGIS
 * @param settings
 * @return {*}
 */
function createEzMapLayer(settings) {
  // const basePath = 'http://10.8.6.103/PGIS_S_TileMapServer/Maps/BJSL/EzMap?Service=getImage&amp;Type=RGB&amp;ZoomOffset=0'
  const basePath = settings.url
  const tileGrid = getWMTSGrid()

  return new TileLayer({
    source: new WMTS({
      url: '',
      crossOrigin: 'Anonymous',
      tileGrid: tileGrid,
      tileLoadFunction(imageTile, src) {
        const query = parse(src)
        const params = {
          Row: query.TileRow,
          Col: query.TileCol,
          Zoom: query.TileMatrix,
          V: '1.0.0'
        }
        imageTile.getImage().src = `${basePath}&amp;${stringify(params)}`;
      }
    }),
    wrapX: false
  })
}

/**
 * 创建 WMTS 资源瓦片图层
 * @param settings
 * @returns {*|TileLayer}
 */
export function createWMTSLayer(settings) {
  if (typeof settings.url === 'function') {
    const urlFunction = settings.url
    const tileGrid = getWMTSGrid()
    return new TileLayer({
      source: new WMTS({
        url: '',
        crossOrigin: 'Anonymous',
        tileGrid: tileGrid,
        tileLoadFunction(imageTile, src) {
          const query = parse(src)
          imageTile.getImage().src = urlFunction(query)
        }
      }),
      wrapX: false
    })
  } else {
    return createEzMapLayer(settings)
  }
}

/**
 * 适配超图PGIS图层
 * @param settings
 * @return {*}
 */
function createSuperLayer(settings) {
  return new TileLayer({
    source: new TileSuperMapRest({
      url: settings.url
    }),
    projection: settings.projection || 'EPSG:4326'
  })
}

/**
 * 航天长峰、航天精一 PGIS
 * @param settings
 * @return {*}
 */
function createFcMapLayer(settings) {
  // http://68.26.21.71/images/GetImage.do?method=showImageRedisBytable&amp;jinyi_admin:MA_PGISSLDT&amp;version=v1
  const basePath = settings.url
  return new TileLayer({
    projection: settings.projection || 'EPSG:4326',
    url: `${basePath}&amp;l={z}&amp;x={y}&amp;y={x}`,
    tileGrid: new TileGrid({
      origin: settings.origins || getFcOrigins(),
      resolutions: settings.resolutions || getFcResolutions()
    })
  })
}


/**
 * 适配图层加载
 * @param {string|object|function} adapter 适配器 object: {id, type, url, layers}
 * @param {object} opts
 * @return {LayerGroup|TileLayer|*}
 */
export function createLayer(adapter, opts = {}) {
  if (typeof adapter === 'function') {
    return adapter({
      TileLayer,
      LayerGroup,
      OSM,
      XYZ,
      WMTS,
      TileImage,
      TileGrid,
      WMTSGrid,
      getWidth,
      getTopLeft,
      getProj
    })
  }
  // 字符串类型转换成对象描述
  const settings = typeof adapter === 'object' ? {...adapter} : {type: adapter}
  const type = settings.type
  delete settings.type
  switch (type) {
    case 'OSM':
      return new TileLayer({
        ...opts,
        source: new OSM(settings)
      })
    case 'XYZ':
      return new TileLayer({
        ...opts,
        source: new XYZ(settings)
      })
    case 'Amap':
      return new TileLayer({
        ...opts,
        source: new XYZ({
          url: AMAP_URL,
          ...settings
        })
      })
    case 'Baidu':
      return baiduLayer({
        url: BAIDU_URL,
        ...settings
      })
    // 天地图
    case 'TDT':
      return createTdtLayerGroup({
        layers: ['vec_c', 'vec_w', 'cva_w', 'ibo_w'],
        ...settings
      })
    // 方正
    case 'Founder':
      return createFounderLayer({
        url: 'http://127.0.0.1:3000/proxy',
        ...settings
      })
    // 山海经纬
    case 'Ez':
      return createEzMapLayer({
        url: EZ_URL,
        ...settings
      })
    // 超图
    case 'Super':
      return createSuperLayer({
        url: SUPER_URL,
        ...settings
      })
    // 航天长峰、航天精一
    case 'Fc':
      return createFcMapLayer({
        url: FC_URL,
        ...settings
      })
    case 'WMTS':
      return createWMTSLayer(settings)
  }

}
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on Wed Jun 10 2020 17:09:12 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
